<template>
  <div class="topMassage">
    <el-card style="background-color: #39566c;padding: 30px 60px 10px 60px">
      <div style="display: flex">
        <el-text style="color: #FFFFFF;font-size: 24px; font-weight: bolder">{{ massage.jobName }}</el-text>
        <el-text style="color: #f26d49;font-size: 24px; margin-left: 30px">{{ massage.salary }}</el-text>
      </div>
      <div style="display: flex; margin-top: 10px">
        <el-text style="color: #FFFFFF; font-size: 14px">
          <el-icon>
            <Location/>
          </el-icon>
          {{ massage.companyAddress }}
        </el-text>
        <div style="flex-grow: 1"></div>
        <el-text style="color: #FFFFFF; font-size: 14px">
          <el-icon>
            <Reading/>
          </el-icon>
          {{ massage.educationRequire }}
        </el-text>
        <div style="flex-grow: 1"></div>
        <el-text style="color: #FFFFFF; font-size: 14px">
          <el-icon>
            <User/>
          </el-icon>
          {{ massage.ageRequire }}
        </el-text>
        <div style="flex-grow: 10"></div>
<!--        <el-button link @click="getoSelf" style="font-size: 18px; font-weight: bolder;color: chartreuse">-->
<!--          <el-icon color="chartreuse" style="margin-right: 10px">-->
<!--            <Edit/>-->
<!--          </el-icon>-->
<!--          完善简历-->
<!--        </el-button>-->
<!--        <div style="flex-grow: 1"></div>-->
<!--        <el-button link style="font-size: 18px; font-weight: bolder;color: chartreuse">-->
<!--          <el-icon color="chartreuse" style="margin-right: 10px">-->
<!--            <Link/>-->
<!--          </el-icon>-->
<!--          上传简历-->
<!--        </el-button>-->
      </div>
    </el-card>
  </div>
  <div class="mainMassage">
    <!-- 工作介绍 -->
    <el-card style="margin-top: 10px">
      <el-text style="font-weight: bolder;font-size: 18px;">职位描述</el-text>
      <!-- 标签 -->
      <div style="display: flex; margin: 20px 0">
        <el-tag v-for="item in massage.skillRequire" key="item" style="margin-right: 10px" type="success">
          {{ item }}
        </el-tag>
      </div>
      <el-text class="job-introduce" size="large">{{ massage.jobIntroduce }}</el-text>
      <template #footer>
        <div class="hrMassage">
          <el-avatar :size="50" src="/src/assets/images/hrimg.png"/>
          <div style="margin-left: 10px; display: flex;flex-direction: column">
            <div style="font-size: 15px;font-weight: bolder;">{{ massage.hrName }}</div>
            <div style="margin-top: 8px">{{ massage.companyName }} · {{ massage.status }}</div>
          </div>
        </div>
      </template>
    </el-card>
    <!-- 不足之处 -->
<!--    <el-card style="margin-top: 10px">-->
<!--      <el-text style="font-weight: bolder;font-size: 18px;">技能差距</el-text>-->
<!--      <el-empty description="description"/>-->
<!--    </el-card>-->
    <!-- 公司信息 -->
    <el-card style="margin-top: 10px">
      <el-text style="font-weight: bolder;font-size: 18px;">公司信息</el-text>
      <div class="company-pane">
        <div class="company-item" style="grid-area: p1">
          <div class="t1">
            <el-text>企业名称</el-text>
          </div>
          <div class="t2">
            <el-text style="color: black">{{ massage.companyName }}</el-text>
          </div>
        </div>
        <div class="company-item" style="grid-area: p2">
          <div class="t1">
            <el-text>企业类型</el-text>
          </div>
          <div class="t2">
            <el-text style="color: black">{{ massage.companyType }}</el-text>
          </div>
        </div>
        <div class="company-item" style="grid-area: p3">
          <div class="t1">
            <el-text>法定代表人</el-text>
          </div>
          <div class="t2">
            <el-text style="color: black">{{ massage.companyBoss }}</el-text>
          </div>
        </div>
        <div class="company-item" style="grid-area: p4">
          <div class="t1">
            <el-text>企业地址</el-text>
          </div>
          <div class="t2">
            <el-text style="color: black">{{ massage.companyAddress }}</el-text>
          </div>
        </div>
        <div class="company-item" style="grid-area: p5">
          <div class="t1">
            <el-text>企业简介</el-text>
          </div>
          <div class="t2">
            <el-text style="color: black;white-space: pre-wrap; /* 或者使用 pre-line */">{{ massage.companyIntroduce }}</el-text>
          </div>
        </div>
      </div>
    </el-card>
    <div style="margin: 10px 0;color: #c0c4cc">
      <el-text>发布于：{{massage.postTime}}</el-text>
    </div>
  </div>
</template>

<script setup>
import {User, Reading, Location, Link, Edit} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from 'vue-router';
import axios from "axios";
import {seekerApi} from "../../api/app";

const jobId = ref()

const massage = ref(
    {
        id: "",
        jobName: "",
        jobTypeId: "",
        jobTypeName: "",
        jobIntroduce: "",
        salary: null,
        skillRequire: [
          "",
          ""
        ],
        educationRequire: "",
        experienceRequire: "",
        ageRequire: "",
        hrId: "",
        hrName: "",
        status: "",
        phone: "",
        companyName: "",
        companyType: "",
        companyBoss: "",
        companyIntroduce: "",
        companyAddress: "",
        companyImage: "",
        postTime: ""
      }
)
onMounted(() => {
  jobId.value = useRoute().params.id
  console.log(jobId.value)
  getData()
})

const getData = () => {
  seekerApi.getJobMessage({
          id:jobId.value
      })
      .then(reponse => {
        console.log(reponse)
        massage.value = reponse.data
      }).catch(error => {
    console.log(error)
  })
}

</script>

<style scoped>
* {
  /*background-color: red;*/
  padding: 0;
  margin: 0;
}

.mainMassage {
  margin: 0 120px;
}

.job-introduce {
  white-space: pre-wrap; /* 或者使用 pre-line */
}

.hrMassage {
  display: flex;
}

.company-pane {
  margin: 30px 50px;
  display: grid;
  background-color: #f8f8f8;
  grid-template-areas:
      "p1 p2"
      "p3 p4"
      "p5 p5";
}

.company-item {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
}

.t1{
  margin-bottom: 10px;
}
</style>
